<template>
  <div class="subscribers">
		  <div v-for="(item,index) in subscribersList" :key="index" class="subscribers-item">
			<div>
				<el-image :src="item.avatarUrl"></el-image>
			</div>  
			<div class="subscribers-item-nickname">{{item.nickname}}</div>
		  </div>
	 

  </div>
</template>
<script>
export default {
  name:'Subscribers',
  props:['subscribersList'],
  data(){
    return{
    
    }
  },
  created(){
	  console.log(this.subscribersList)
  },
  methods:{
     
  },
  filters:{
  }
}
</script>

<style lang="less" scoped>
	.subscribers{
		width: 100%;
		padding: 10px 0;
		font-size: 14px;
		// height: 100%;
		display: flex;
		flex-wrap: wrap;
		.subscribers-item{
			// display: flex;
			width: 100px;
			height: 100px;
			padding: 15px 10px;
			text-align: center;
			.el-image{
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			.subscribers-item-nickname{
				overflow: hidden; 
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		
	}
   
</style>
